<template>
	<HeaderNav />
	
	<!-- 充值窗口
	<div class="cvs" v-show="payWin">
		<div class="newModWin zfb-win">
			<section class="clearfix">
				<div class="title">支付宝快速充值兑换积分</div>
				<div class="close" @click="payWin = false"></div>
			</section>
			<div class="zfb">
				<div class="clearfix">
					<input type="number" name="money" placeholder="请输入充值金额,单位元"/>
					<input type="button" class="zfb-btn" value="充值" />
				</div>
				<b>充值比例：1元=10积分</b>
			</div>
		</div>
	</div>
  -->
	<article>
		<!-- 网站主体 -->
		<div id="main" class="clearfix">
			<!-- 定义右侧窗口信息 -->
			<section class="aside">
				<UserDetail :user="currentUser"></UserDetail>
				<!-- 关注数 -->
				<aside class="psl">
					<a class="focus-on" href="/attention">关注数:<b>{{user.attach}}</b></a>
					<a class="fan">粉丝数:<b>{{user.fans}}</b></a>
				</aside>
				<ScorePieShape :score="user.score" :scoreDetails="scoreDetails" />
			</section>
			<section style="height: 730px">
				<h1 class="detail-score">积分明细</h1>
				<ul class="person-info">
					<li>
						<strong class="c1">资源名称</strong>
						<strong class="c2">积分变动</strong>
						<strong class="c3">原因</strong>
						<strong class="c4">时间</strong>
					</li>
					

					<li v-if="userScoreList.length == 0">
						<a>暂无数据</a>
					</li> 

					<li v-for="userScore in userScoreList">
						<a v-if="userScore.resId" class="c1 link" @click="$router.push({name: 'resource-detail', params: {id: userScore.resId}})">{{ userScore.resourceName }}</a>
            <a v-else class="c1">&lt;&lt;无资源&gt;&gt;</a>
						<span class="c2">{{ userScore.score }}</span>
						<span class="c3"> - {{ userScore.action }}{{ userScore.score < 0 ? '扣除': '获得' }}积分</span>
						<span class="c4">{{ userScore.createTime }}</span>
					</li>

				</ul>
				
				<!-- 分页插件 -->
				<VanPagination v-model="page" :totalItems="total" @click-page="queryUserScorePage"
                       :itemsPerPage="rows" :showPageSize="5" :forceEllipses="true" />
			</section>
			
		</div>
	</article>
	<Footer />
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue"; 
import VanPagination from '../components/VanPagination.vue' ;	
import UserDetail from '../components/UserDetail.vue' ;	
import ScorePieShape from '../components/ScorePieShape.vue' ;
import { mapGetters  } from 'vuex'

export default {
	components: {
		HeaderNav, 
		Footer , 
		VanPagination ,
		UserDetail,
		ScorePieShape,
	},
	data() {
		return {
			page: 1, 
			total: 0,
      rows:  15,
			user: {
				score: 0,
				attach: 0, // 关注数
				fans: 0 , // 粉丝数
			},
      userScoreList: [] ,
			scoreDetails:[]
		}
	},
  created(){
     this.queryUserScorePage();  // 查询用户积分来源列表
     this.queryStaticsScores() ; // 查询积分统计信息
  },
  methods:{
     queryUserScorePage() {
        this.$api.queryUserScores(this.page, this.rows).then(ret=> {
           if (ret.status) {
              this.total = ret.data.total ;
              this.userScoreList = ret.data.records ;
           }
        })
     },
    queryStaticsScores() {
       this.$api.queryStaticsScoresShape().then(ret=> {
          if (ret.status) {
             this.user.score = ret.data.score ;
             this.user.fans = ret.data.fans ;
             this.user.attach = ret.data.attach ;
             this.scoreDetails = ret.data.scoreDetails ;
          }
       })
    }
  },
  computed: {
     ...mapGetters(["currentUser"])
  }
}
</script>

<style>
</style>